<div data-th-include="vc/meeting/meetingAdd"></div>
<div data-th-include="vc/meeting/meetingDetail"></div>
<div data-th-include="vc/meeting/meetingCopy"></div>
<div data-th-include="vc/meeting/meetingLock"></div>
<!-- Tpv zhongxiang.huang 20181226 add ---start--- -->
<div data-th-include="vc/meeting/meetingWechatInvite"></div>
<div data-th-include="vc/meetingroom/meetingroomUpgrade"></div>
<!-- Tpv zhongxiang.huang 20181226 add ---end -->
<div data-th-include="vc/meetingroom/volumeOperation"></div>
<div data-th-include="vc/meetingroom/meetingroomEdit"></div>
<div data-th-include="vc/meetingroom/meetingroomMove"></div>
<div>
<div class="card" style="width:15%;float:left;margin-right:15px">
<div class="card-block">
	 <div style="background-color: #ffffff;border-collapse:separate;border-spacing:5px;width:100%;padding-top: 10px">
	 	<div class="pull-left" >
	    	<div style="width:120px; font-size: 18px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">[[#{meetingroom.group}]]</div>
	    </div>
	    <div style="float:right;padding-top: 10px">
	    	<input id="createGroup" type="image" src="../../img/vc/icon_add.png">
	    	<input id="renameGroup" type="image" src="../../img/vc/icon_edit.png">
	    	<input id="deleteGroup" type="image" src="../../img/vc/icon_delete.png">
	        <!-- <span style="background-color:#ebebeb;" id="createGroup" class="actions__item zmdi zmdi-plus zmdi-hc-fw"   shiro:hasPermission="meetingroom:addgroup"></span>
	        <span style="background-color:#ebebeb;" id="renameGroup"  class="actions__item zmdi zmdi-edit zmdi-hc-fw"  shiro:hasPermission="meetingroom:renamegroup"></span>
	        <span style="background-color:#ebebeb;" id="deleteGroup" class="actions__item zmdi zmdi-delete zmdi-hc-fw" shiro:hasPermission="meetingroom:delgroup"></span> -->
	    </div>
	</div> 
	<HR style="margin-top:40px;margin-bottom:  10px" align="center" width="100%" color="#CBCBCB" SIZE="1">
	<input type="hidden" id="groupIds" data-th-value="${groupIds}">
	<div class="tpv-meetingroom-jstree">
		<div id="meetingRoomGroup" style="overflow:auto;width:220px;min-height: 300px"></div>
	</div>
</div>
</div>
<div class="card">
    <div class="card-block"> 
		<div class="tpv-main-header clearfix" style="background-color: #ffffff;">
            <input type="hidden" id="currUserId" data-th-value="${user.userId}"/>
            <input type="hidden" id="currDeptId" data-th-value="${user.deptId}"/>
         	<div class="pull-left" style="padding-top: 10px">
               	<div id="select-title" style="width:180px; font-size: 18px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">[[#{meetingroon.all}]]</div>
            </div>
            <div id="data-table_filter" class="dataTables_filter tpv-main-filter">
                <form class="meetingroom-table-form">
                    <div class="tpv-filter-layout" >
                        <div class="tpv-filter-item tpv-sm-filter-item">
                            <div class="input-group">
                                <span class="input-group-addon" data-th-text="#{meetingroom.name} +' ：  '"></span>
                                <div class="form-group">
                                    <input type="text" name="name" class="form-control"> <i class="form-group__bar"></i>
                                </div>
                            </div>
                        </div>
                        <div class="tpv-filter-item tpv-sm-filter-item">
                            <div class="input-group">
                                <span class="input-group-addon" data-th-text="#{modelname} +' ：  '"></span>
                                <div class="form-group">
                                    <input type="text" name="model" class="form-control"> <i class="form-group__bar"></i>
                                </div>
                            </div>
                        </div>
                        <div class="tpv-filter-item tpv-sm-filter-item">
                            <div class="input-group">
                                <span class="input-group-addon">Mac ： </span>
                                <div class="form-group">
                                    <input type="text" name="mac" class="form-control" > <i class="form-group__bar"></i>
                                </div>
                            </div>
                        </div>
                        <div class="tpv-filter-item tpv-sm-filter-item" style="width: 180px;">
                            <div class="input-group">
                                <span class="input-group-addon" data-th-text="#{meetingroom.licensed} +' : '"></span>
                                <div class="form-group" >

                                    <select class="form-control" name="licensed">
                                        <option value="" selected data-th-text="#{all}"></option>
                                        <option value="1" data-th-text="#{yes}"></option>
                                        <option value="0" data-th-text="#{no}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="tpv-filter-item tpv-sm-filter-item" style="width: 180px;">
                            <div class="input-group"  >
                                <span class="input-group-addon" data-th-text="#{meetingroom.valid} +': '"></span>
                                <div class="form-group">
                                    <select class="form-control" name="valid">
                                        <option value="" selected data-th-text="#{all}"></option>
                                        <option value="1" data-th-text="#{yes}"></option>
                                        <option value="0" data-th-text="#{no}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="tpv-filter-item tpv-filter-auto">
                       		<button type="button" class="btn tpv-btn-warning" onclick="refresh()" th:title="#{common.btn.reset}">[[#{common.btn.reset}]]</button>
                   		</div>
                   
                   		</div>
                	</form>
            	</div>
			</div>
            
            <HR style="margin-top:10px;margin-bottom:  10px" align="center" width="100%" color="#CBCBCB" SIZE="1">
            <div id="data-table_wrapper" class="dataTables_wrapper">
                
                <div class="dataTables_buttons hidden-sm-down actions tpv-table-btns clearfix">
                    <div class="tpv-table-group-btns clearfix" >
                    	<button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="search()">[[#{meetingroom.flush}]]</button>
                     	<button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="openMoveToModal()" >[[#{meetingroom.moveto}]]</button>
                     	<button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="deleteMeetingRooms()">[[#{meetingroom.delete}]]</button>
                    </div>
                    <div class="tpv-table-group-btns clearfix" style="margin-left: 10px" >
                    	<button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="authorizeMeetingRoom()" >[[#{meetingroom.authorise}]]</button>
                    	<button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="deAuthorizeMeetingRoom()" >[[#{meetingroom.deauthorise}]]</button>
                    	<span class="actions__item zmdi zmdi-search" hidden onclick="search()" data-th-title="#{search}" ></span>		                    
                    </div>
                    <div class="tpv-table-group-toggle">
                     	<div class="btn-group btn-group-toggle" data-toggle="buttons" id="filter_state">
                      		<label class="btn btn-save">
                          		<input type="radio" name="state" autocomplete="off" value="0" data-th-text="#{meetingroom.idle}"><span id="freeCount"></span>
                      		</label>
                      		<label class="btn btn-save">
                          		<input type="radio" name="state" autocomplete="off" value="1" data-th-text="#{meetingroom.using}"><span id="usedCount"></span>
                      		</label>
                  		</div>
            		</div>
            	</div>
            </div>
            <table id="meetingRoomTable" style="table-layout:fixed;" data-mobile-responsive="true" class="mb-bootstrap-table text-nowrap"></table>
        </div>
	</div>
</div>
<script data-th-src="@{js/app/vc/meetingroom/meetingroom.js(t=${version})}"></script>
<script type="text/x-handlebars-template" id="meetingroom-info">
    <div class="meetingroom-info-box" >
        <div>
            <img src="{{displayimg}}" ><a href="javascript:void(0)" class="edit-meetingroom meetingroom-info-name" title="{{name}}">{{name}}</a>{{#if isonline}} <span data-th-text="'('+#{online}+')'"></span>{{else}}<span data-th-text="'('+#{offline}+')'"></span>{{/if}}
        </div>
        <div style="display:table;border-collapse:separate;margin-left: 24px;">
            <div style="display:table-row;">
                <div style="display:table-cell;" data-th-text="#{modelname} +' : {{model}}'"></div>
            </div>
            <div style="display:table-row;">
                <div style="display:table-cell;">CPU : {{cpu}}</div>
            </div>
            <div style="display:table-row;">
                <div style="display:table-cell;">RAM : {{ram}}</div>
            </div>
        </div>
    </div>
</script>
<script type="text/x-handlebars-template" id="operation-box">
    <div style="display:table;border-collapse:separate;">
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <button type="button" class="create-meeting btn btn-primary  btn-save" style="margin-right:15px;width:120px" data-th-text="#{meeting.option.add}"></button>
            </div>
        </div>
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <button type="button" class="invit-meeting btn btn-primary  btn-save" style="margin-right:15px;width:120px" data-th-text="#{meeting.detail}"></button>
            </div>
        </div>
        <!--<div style="display:table-row;">-->
            <!--<div style="display:table-cell;">-->
                <!--<button type="button" class="copy-meeting btn btn-primary  btn-save" style="margin-right:15px;width:120px" data-th-text="#{meeting.copy}"></button>-->
            <!--</div>-->
        <!--</div>-->
    </div>
</script>
<script type="text/x-handlebars-template" id="remote-action-box">
    <div style="width: 168px;text-align: left;">
        <div class="operation-btn"><img src="{{resetimg}}" class="action-reset" data-th-title="#{reboot}" onerror="this.style.display='none'"></div>
        <div class="operation-btn"><img src="{{screenshotimg}}"  class="action-screenshot" data-th-title="#{screenshot}" onerror="this.style.display='none'"></div>
        <!--<div class="operation-btn"><img src="{{volumeimg}}" class="action-volume" data-th-title="#{volumeset}" onerror="this.style.display='none'"></div>-->
        <div style="display:table;border-collapse:separate;">
            <div style="display:table-row;">
                <div style="display:table-cell;">IP : {{ip}}</div>
            </div>
            <div style="display:table-row;">
                <div style="display:table-cell;">MAC : {{mac}}</div>
            </div>
            <div style="display:table-row;">
                <div style="display:table-cell;">Version : {{version}}</div>
            </div>
        </div>
    </div>
</script>
<!-- Tpv zhongxiang.huang 20181227 add ----start--- -->
<script type="text/x-handlebars-template" id="meetingroom-max-users-allowed">
	<di class="meetingroom-info-box">
        <span >{{maxUsersAllowed}}</span><button type="button" class="btn tpv-btn-primary action-maxusers-upgrade" style="margin-left: 6px; width:75px;">{{upgrade}}</button>
    </div>
</script>
<!-- Tpv zhongxiang.huang 20181227 add ----end--- -->